<template>
  <div class="user-wrapper">
    <s-menu
      :collapsed="collapsed"
      :menu="usermenu"
      :theme="theme"
      :mode="mode"
      @select="onSelect"
    ></s-menu>
    <a-dropdown>
      <div class="userStyle">
        <!-- 添加登录状态展示 -->
        <a-badge
          style="float:center"
          :offset="[-10, 23]"
          :numberStyle="{padding: '4px'}"
        >
          <a-avatar
            class="avatar"
            size="default"
            :src="avatar"
            style="backgroundColor: #f49d2a"
          >{{ nickname.slice(0,1) }}</a-avatar>
        </a-badge>
        <div v-show="!collapsed" class="nameStyle" >{{ nickname }}</div>
      </div>
      <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
        <!-- <a-menu-item key="0">
          <router-link :to="{ name: 'Center' }">
            <a-icon type="user" />
            <span>个人信息</span>
          </router-link>
        </a-menu-item>-->
        <a-menu-item key="1">
          <router-link :to="{ name: 'Settings' }">
            <a-icon type="setting" />
            <span>账户设置</span>
          </router-link>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="3">
          <a href="javascript:;" @click="handleLogout">
            <a-icon type="logout" />
            <span>注销</span>
          </a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>

</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import Utils from '@/utils/utils.js'
import { ONLINE_STATUS } from '@/utils/constants'
import SMenu from '../menu/index'

export default {
  name: 'UserMenu',
  components: { SMenu },
  data () {
    return {
      statusMap: new Map([
        [ONLINE_STATUS.LANDING, 'warning'],
        [ONLINE_STATUS.ONLINE, 'success'],
        [ONLINE_STATUS.EXITING, 'error'],
        [ONLINE_STATUS.OFFLINE, 'default']
      ]),
      usermenu: []
    }
  },
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menu: {
      type: Array,
      required: true
    }
  },
  created () {
    // const managerPIds = ['2', '3', '4']
    // const subMenu = this.menu.find(item => item.name === 'Dashboard').children
    // this.usermenu = subMenu.filter(item => {
    //   if (managerPIds.indexOf(this.userPId) > -1) {
    //     return false
    //   } else {
    //     return item.name === 'Feedback' || item.name === 'MyNotice'
    //   }
    // })
  },
  computed: {
    ...mapGetters(['nickname', 'avatar', 'userPId'])
  },
  methods: {
    ...mapActions(['Logout']),
    handleLogout () {
      const that = this

      this.$confirm({
        title: '提示',
        content: '真的要下线吗 ?',
        onOk () {
          return that
            .Logout({})
            .then(() => {
              window.location.reload()
            })
            .catch(err => {
              that.$message.error({
                title: '错误',
                description: err.message
              })
            })
        },
        onCancel () {}
      })
    },
    messageFun () {
      Utils.$emit('message', 'msg')
      this.$router.push({ name: 'Workplace', params: { messageFlag: true } })
    },
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    }
  }
}
</script>
<style lang="less" scoped>
.user-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .user-menu-item{
    margin-bottom: 16px;
  }
}
.nameStyle {
  float:left;
  margin-left:8px;
  margin-top:2px;
  overflow:hidden;
  color:rgba(255, 255, 255, 0.65)
}
.userStyle {
  width:100%;
  padding:12px 16px;
}
</style>
